<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="list.css">
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css">
    <script src="./js/utils.js"></script>
    <style>



    </style>
</head>

<body>
    <div class="page">
        
        <div class="head">
        <div class="common">
           <ul class="head-nav1">
               <li style="width: 60px;"> 
                   地区 <span class="iconfont icon-xiajian"></span>
                   <ol style="background-color:white;">
                       <li>中国大陆</li>
                       <li>中国香港</li>
                       <li>马来澳门</li>
                       <li>中国台湾</li>
                       <li>马来西亚</li>
                       <li>澳大利亚</li>
                       <li>加拿大</li>
                   </ol>
               </li>
               <li>
                 <a href="dl.html" class="h">亲，请登录</a>
                 <a href="./zc.html">免费注册</a>
               </li>
               <li><a href="xg.html" style="padding:0 7px ;">修改个人信息</a></li>
              
               <li><a href="">网页无障碍</a></li>
           </ul>
           <ul class="head-nav2">
               <li><a href="lb.html">列表首页</a>
                 
               </li>
               <li><a href=""  style="padding: 0 6px;">我的淘宝<span class="iconfont">&#xe79a;</span></a>
                 <ol><li><a href="">已买到的宝贝</a></li>
                     <li><a href="">我的足迹</a></li>
                 </ol>
               </li>
               <li><a href="gwc.html"><i class="h"><span class="iconfont">&#xe70c;</span></i> 购物车</a></li>
               <li><a href=""><span class="iconfont">&#xe8c6;</span>收藏夹<span class="iconfont">&#xe79a;</span></a>
               <ol>
                 <li><a href="">收藏的宝贝</a></li>
                 <li><a href="">收藏的店铺</a></li>
               </ol></li>
               <li><a href="">商品分类</a></li>
               <li><a href="">免费开店</a></li>
               <li><a href="">千牛卖家中心<span class="iconfont">&#xe79a;</span></a>
                 <ol>
                   <li><a href="">开店入驻</a></li>
                   <li><a href="">已卖出的宝贝</a></li>
                   <li><a href="">出售中的宝贝</a></li>
                   <li><a href="">卖家服务市场</a></li>
                   <li><a href="">卖家培训中心</a></li>
                   <li><a href="">体检中心</a></li>
                   <li><a href="">电商学习中心</a></li>
                 </ol>
               </li>
               <li><a href="">联系客服<span class="iconfont">&#xe79a;</span></a>
               <ol>
                 <li><a href="">消费者客服</a></li>
                 <li><a href="">卖家客服</a></li>
               </ol>
               </li>
           </ul>
        </div>
        </div>
        <div class="search">
            <div>
                 <div class="imglogo">
                <h2><a href="">淘宝网</a></h2>
            </div>
            <div class="search-nav"> 
                   <form action="">
                       <tr>
                           <td> <input type="search"placeholder="请输入搜索文字" class="input1"> </td>
                           <td> <input type="submit"value="搜索" class="input2"> </td>
                        </tr>
                   </form>
                <ul>
                    <li>宝贝<span class="iconfont">&#xe79a;</span> <span class="l">|</span>
                        <ol>
                            <li><a href="">天猫</a></li>
                            <li><a href="">店铺</a></li>
                        </ol>
                    </li> 
                </ul>
                
            
            </div>
           

          <div class="search-nav2" >
                       <ul>
                           <a href="">新款连衣裙</a>
                           <a href="">四件套</a>
                           <a href="">潮流T恤</a>
                           <a href="">时尚女鞋</a>
                           <a href="">短裤</a>
                           <a href="">半身裙</a>
                           <a href="">男士外套</a>
                           <a href="">墙纸</a>
                           <a href="">行车记录仪</a>
                           <a href="">新款男鞋</a>
                       </ul>
                   </div>
           </div>
        </div>
          <div class="center">
            <div class="centercommon">
                <div class="left">
                  <h2>主题市场</h2>
                  <ul>
                      <li><i class="iconfont">&#xe60c;</i><a href="">女装</a><span>/</span><a href="">内衣</a> <span>/</span><a href="">家居</a></li>
                      <li><i class="iconfont">&#xe610;</i><a href="">女鞋</a><span>/</span><a href="">男鞋</a> <span>/</span><a href="">箱包</a></li>
                      <li><i class="iconfont">&#xe601;</i><a href="">母婴</a><span>/</span><a href="">童装</a> <span>/</span><a href="">玩具</a></li>
                      <li><i class="iconfont">&#xe7b5;</i><a href="">男装</a><span>/</span><a href="">户外运动</a></li>
                      <li><i class="iconfont">&#xe602;</i><a href="">美妆</a><span>/</span> <a href="">彩妆</a><span>/</span> <a href="">个护</a></li>
                      <li><i class="iconfont">&#xe616;</i><a href="">手机</a><span>/</span><a href="">数码</a><span>/</span><a href="">企业礼品</a></li>
                      <li><i class="iconfont">&#xe660;</i><a href="">大家电</a><span>/</span><a href="">生活电器</a></li>
                      <li><i class="iconfont">&#xe710;</i><a href="">零食</a><span>/</span><a href="">生鲜</a><span>/</span><a href="">茶酒</a></li>
                      <li><i class="iconfont">&#xe710;</i><a href="">厨具</a><span>/</span><a href="">收纳</a><span>/</span><a href="">清洁</a></li>
                      <li><i class="iconfont">&#xe61d;</i><a href="">家纺</a><span>/</span><a href="">家饰</a><span>/</span><a href="">鲜花</a></li>
                      <li><i class="iconfont">&#xe65c;</i><a href="">图书音像</a><span>/</span><a href="">文具</a></li>
                      <li><i class="iconfont">&#xe678;</i><a href="">医药保健</a><span>/</span><a href="">进口</a></li>
                      <li><i class="iconfont">&#xec6d;</i><a href="">汽车</a><span>/</span><a href="">二手车</a><span>/</span><a href="">用品</a></li>
                      <li><i class="iconfont">&#xe685;</i><a href="">房产</a><span>/</span><a href="">装修家具</a><span>/</span><a href="">建材</a></li>
                      <li><i class="iconfont">&#xe600;</i><a href="">手表</a><span>/</span><a href="">眼镜</a><span>/</span><a href="">珠宝饰品</a></li>
                  </ul>

                  
                </div>
                <div class="right">
                    <div class="righttop">
                       <ul class="first">
                        <li><a href="https://www.tmall.com" style="color: #FF0036;">天猫</a></li>
                        <li><a href="https://ju.taobao.com" style="color: #FF0036;">聚划算</a></li>
                        <li><a href="https://chaoshi.tmall.com" style="color: #33c900">天猫超市</a></li>
                    </ul>
                    <ul style="font-size: 14px;">
                        <li>|</li>
                        <li><a href="https://sf.taobao.com">
                            司法拍卖
                        </a><a href="https://www.fliggy.com/?spm=a21bo.50862.201859.9.28689e73wh3bzS">
                            飞猪旅行
                        </a></li>
                        <li><a href="https://pages.tmall.com/wow/a/act/tiantian/dailygroup/2391/wupr?wh_pid=daily-231043">
                            天天特卖
                        </a></li>
                    </ul>
                    <ul style="font-size: 14px;">
                        <li>|</li>
                        <li><a href="https://izhongchou.taobao.com/">
                            造点新货
                        </a></li>
                        <li ><a href="https://suning.tmall.com/">
                            苏宁易购
                        </a></li>
                        <li ><a href="https://good.tmall.com">
                            淘宝心选
                        </a></li>
                        <li ><a href="https://tmjl.tmall.com/">
                            智能生活
                        </a></li>
                        <li ><a href="https://taolive.taobao.com/explore/index.html?isEntertainment=true">
                            淘宝直播
                        </a></li>
                    </ul>  
                    </div>
                    <div class="banner">
                        <div class="carousel">
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="./img/lbt1.png" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="./img/lbt2.jpg" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="./img/lbt3.jpg"alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="./img/lbt4.jpg"alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="./img/lbt5.jpg"alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="./img/lbt2.jpg"alt="" >
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="./img/lbt3.jpg"alt="">
                                    </a>
                                </li>
                            </ul>
                                <div>
        
                                </div>
                                <ol></ol>
                                <a href="" class="leftBtn">&lt;</a>
                                <a href="" class="rightBtn">&gt;</a>                     
                    </div>
                    <div class="iamg1"><img src="./img/1651037521(1).png" alt=""></div>
                    <div class="iamg"><img src="./img/1651036695(1).png" alt="" ></div>
                </div>
                </div>
                <div class="bottom">
                <div>
                    <div class="bottom-top">
                        <h3>
                            <span>有好货</span>
                            <img src="./img/O1CN01EjcAPM25IsjiwGyYs_!!6000000007504-2-tps-65-20.png" alt="">
                        </h3>
                    </div>
                </div >
                    <div class="bottom-center">
                        <ul>
    
                        </ul>
                        <div class="fenye">
                        
                        </div>

                    </div>

                </div>
                
                <div class="end"><p>END</p></div>
            </div>
            <div class="fotter">
            <ul>
              <li><a href="//page.1688.com/shtml/about/ali_group1.shtml">阿里巴巴集团</a></li>
              <li>|</li>
              <li><a href="//www.alibaba.com">阿里巴巴国际站</a></li>
              <li>|</li>
              <li><a href="//www.1688.com">阿里巴巴中国站</a></li>
              <li>|</li>
              <li><a href="//www.aliexpress.com">全球速卖通</a></li>
              <li>|</li>
              <li><a href="//www.taobao.com">淘宝网</a></li>
              <li>|</li>
              <li><a href="//www.tmall.com">天猫</a></li>
              <li>|</li>
              <li><a href="//ju.taobao.com">聚划算</a></li>
              <li>|</li>
              <li><a href="//www.etao.com">一淘</a></li>
              <li>|</li>
              <li><a href="//www.alimama.com">阿里妈妈</a></li>
              <li>|</li>
              <li><a href="//www.aliyun.com">阿里云计算</a></li>
              <li>|</li>
              <li><a href="//www.yunos.com">云OS</a></li>
              <li>|</li>
              <li><a href="//wanwang.aliyun.com">万网</a></li>
              <li>|</li>
              <li><a href="//www.alipay.com">支付宝</a></li>
              <li>|</li>
            </ul>
            <ol>
              <li><a href="//huodong.taobao.com/wow/tbhome/act/about-home">关于淘宝</a></li>
              <li><a href="//www.taobao.com/about/partners.php">合作伙伴</a></li>
              <li><a href="//pro.taobao.com">营销中心</a></li>
              <li><a href="//service.taobao.com/support/main/service_route.htm">联系客服</a></li>
              <li><a href="//open.taobao.com">开放平台</a></li>
              <li><a href="//www.taobao.com/about/join.php">诚征英才</a></li>
              <li><a href="//consumerservice.taobao.com/contact-us">联系我们</a></li>
              <li><a href="//www.taobao.com/sitemap.php">网站地图</a></li>
              <li><a href="//terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html">法律声明及隐私权政策</a></li>
              <li class="last">© 2022 Taobao.com 版权所有</li>
            </ol>
            <ol class="lastul">
              <li>网络文化经营许可证：
                <a href="//img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">文网文[2010]040号</a>
              </li>
              <li>|</li>
              <li>短消息类服务接入代码使用证书：号【2016】00154-A01</li>
              <li>|</li>
              <li>信息网络传播视听节目许可证：1109364号</li>
              <li>市场名称登记证：工商网市字3301004120号
                <a href="//img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">增值电信业务经营许可证：浙B2-20080224-1</a>
              </li>
              <li>|</li>
              <li>广播电视节目制作经营许可证（浙）字第01012号</li>
              <li>|</li>
              <li>信息网络传播视听节目许可证：1109364号</li>
              <li>网络文化经营许可证：
                <a href="//img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">文网文[2010]040号</a>
              </li>
              <li>|</li>
              <li>增值电信业务经营许可证：浙B2-20080224-1</li>
              <li>|</li>
              <li>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</li>
            </ol>    
            </div>

    </div>
          
      
    

        

</body>
</html>
<script src="./js/utils.js"></script>
<script src="./js/page.js"></script>
<script>
/*     $('ul>li').hover(function(){
        $(this).find('ol').stop().slideDown().parent().siblings().find('ol').stop().slideUp()
}, function() {
    $(this).find('ol').stop().slideUp()
}) */
function Carousel() {
    this.leftBtn = document.querySelector('.carousel>a.leftBtn');
    this.rightBtn = document.querySelector('.carousel>a.rightBtn');
    this.container = document.querySelector('.carousel');
    this.ul = document.querySelector('.carousel ul');
    this.ol = document.querySelector('.carousel ol');
    this.firstLi = this.ul.children[0]
    this.index = 1
    this.flag = true
    this.timer = null
}
Carousel.prototype.init = function() {
    var ol = this.ol.cloneNode(true)
    for(var i=0; i<this.ul.children.length; i++) {
       ol.appendChild(document.createElement('li'))
    }
    ol.children[0].style.backgroundColor = 'red'
    this.ol.parentElement.replaceChild(ol, this.ol)
    this.ol = ol
    ol.style.borderRadius = ol.offsetHeight/2 + 'px'
    var ul = this.ul.cloneNode(true)
    var lastLi = this.ul.children[this.ul.children.length-1].cloneNode(true)
    ul.insertBefore(lastLi, ul.children[0])
    ul.appendChild(this.firstLi.cloneNode(true))
    setStyle(ul, {
        width: this.firstLi.offsetWidth * ul.children.length + 'px',
        left: -this.firstLi.offsetWidth + 'px'
    })
    this.ul.parentElement.replaceChild(ul, this.ul)
    this.ul = ul
    this.firstLi = this.ul.children[0]
    this.rightBtn.onclick = () => {
        if(!this.flag) return false
        this.flag = false
        this.index++
        animate(this.ul, {
            left: -this.index * this.firstLi.offsetWidth
        }, () => {
            if(this.index === this.ul.children.length - 1) {
                this.index = 1
                this.ul.style.left = -this.index * this.firstLi.offsetWidth + 'px'
            }
            for(var i=0; i<this.ol.children.length; i++) {
                this.ol.children[i].style.backgroundColor = '#e1e1e1'
            }
            this.ol.children[this.index-1].style.backgroundColor = 'red'
            this.flag = true
        })
        return false
    }

    this.leftBtn.onclick = () => {
        if(!this.flag) return false
        this.flag = false
        this.index--
        animate(this.ul, {
            left: -this.index * this.firstLi.offsetWidth
        }, () => {
            if(this.index === 0) {
                this.index = this.ul.children.length - 2
                this.ul.style.left = -this.index * this.firstLi.offsetWidth + 'px'
            }
            for(var i=0; i<this.ol.children.length; i++) {
                this.ol.children[i].style.backgroundColor = '#e1e1e1'
            }
            this.ol.children[this.index-1].style.backgroundColor = 'red'
            this.flag = true
        })
        return false
    }
    for(let i=0; i<this.ol.children.length; i++) {
        this.ol.children[i].onclick = () => {
            if(!this.flag) return false
            this.flag = false
            this.index = i+1
            animate(this.ul, {
                left: -this.index * this.firstLi.offsetWidth
            }, () => {
                if(this.index === 0) {
                    this.index = this.ul.children.length - 2
                    this.ul.style.left = -this.index * this.firstLi.offsetWidth + 'px'
                }
                for(let i=0; i<this.ol.children.length; i++) {
                    this.ol.children[i].style.backgroundColor = '#000'
                }
                this.ol.children[this.index-1].style.backgroundColor = 'red'
                this.flag = true
            })
        }
    }
    this.timer = setInterval(() => {
        this.rightBtn.onclick()
    }, 3000)

    this.container.onmouseover = () => {
        clearInterval(this.timer)
    }
    this.container.onmouseout = () => {
        this.timer = setInterval(() => {
            this.rightBtn.onclick()
        }, 3000)
    }
}
var c = new Carousel()
c.init()


var ul = document.querySelector('.bottom-center ul');
var fenye = document.querySelector('.fenye');
var current = 1
requestData()
function requestData() {
    // 发送ajax请求获取商品列表数据
    sendAjax({
        url: 'http://localhost:8888/goods/list',
        data: {
            pagesize:50
        },
        success: res => {
            console.log(res);
            var {code, list, total} = res;
            if(code === 1) {
                // 数据获取成功
                // 渲染
                var str = ''
                list.forEach(v => {
                    str += `
                        <li>
                            <a href="xqy.html?id=${v.goods_id}">
                                <img src="${v.img_big_logo}" alt="">
                                <span class="price">￥${v.price}</span>
                                <br>
                                <span class="title">${v.title}</span>
                            </a>
                        </li>
                    `
                })
                ul.innerHTML = str
            }
        }
    })
}

</script>
